<template>
    <div id="roles">
<!--        面包屑导航-->
        <bread-nav>
            <span slot="nav1">权限管理</span>
            <span slot="nav2">角色列表</span>
        </bread-nav>
<!--        卡片视图-->
        <el-card>
            <el-button type="primary" size="mini" @click="addRoleM">添加角色</el-button>
<!--            添加角色对话框-->
            <add-role-dia :message="addRoleDialog"/>
            <!--        角色列表数据-->
            <el-table
                    border
                    :data="rolesList"
                    stripe
                    style="width: 100%">
<!--                扩展区-->
                <el-table-column  type="expand">
                    <template v-slot="scope">
                        <el-row v-for="item in scope.row.children" :key="item.id">
<!--                            一级权限-->
                            <el-col :span="5">
                            <el-tag  closable type="primary" @close="deletePower(scope.row,item.id)">{{item.authName}}</el-tag>
                            </el-col>
<!--                            二级和三级权限-->
                            <el-col :span="19">
                                <el-row v-for="item1 in item.children" :key="item1.id">
<!--                                    二级权限-->
                                    <el-col :span="6">
                                        <el-tag closable type="success" @close="deletePower(scope.row,item1.id)">{{item1.authName}}</el-tag>
                                    </el-col>
<!--                                    三级权限-->
                                    <el-col :span="18">
                                        <el-tag closable type="warning" v-for="item2 in item1.children"
                                                @close="deletePower(scope.row,item2.id)" :key="item2.id">
                                            {{item2.authName}}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>

                <el-table-column  type="index" label="#"></el-table-column>
                <el-table-column  label="角色名称" prop="roleName"></el-table-column>
                <el-table-column  label="角色描述" prop="roleDesc"></el-table-column>
                <el-table-column  label="操作" width="300px">
                    <template v-slot="scope">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editRoleM(scope.row)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delRole(scope.row.id)">删除</el-button>
                            <el-button type="warning" icon="el-icon-setting" size="mini" @click="addPower(scope.row)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
<!--            分配权限对话框-->
            <distri-pow-dia :power-dialog="powerDialog" :roleList="roleList" :default-keys="defaultKeys"
            :role-id="roleId"/>
<!--            编辑角色对话框-->
            <edit-role-dia :message="editRoleDialog" :edit-role="editRole"/>
        </el-card>
    </div>
</template>

<script>
    import BreadNav from "../../components/content/BreadNav";
    import DistriPowDia from "./powerComp/DistriPowDia";
    import AddRoleDia from "./powerComp/AddRoleDia";
    import EditRoleDia from "./powerComp/EditRoleDia";

    import {getRolesData,deleteRoleRight,getPowerTree,deleteRole} from "../../network/power";

    export default {
        name: "Roles",
        components:{
            BreadNav,
            DistriPowDia,
            AddRoleDia,
            EditRoleDia
        },
        data(){
            return{
                rolesList:[],
                roleList:[],
                defaultKeys:[],
                editRole:{},
                roleId:0,
                powerDialog: false,
                addRoleDialog:false,
                editRoleDialog:false,
            }
        },
        methods:{
            //监听添加角色对话框
            addRoleM(){
                this.addRoleDialog = !this.addRoleDialog
            },
            //监听编辑角色对话框
            editRoleM(role){
                this.editRoleDialog = !this.editRoleDialog;
                this.editRole = role;
            },
            //删除角色
            delRole(id){
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                    if(res === 'confirm'){
                        deleteRole(id).then(res => {
                            if(res.data.meta.status !== 200){
                                this.$message.error(res.data.meta.msg)
                            }
                            this.$message.success(res.data.meta.msg);
                            this.getRolesDataM()
                        })
                    }
                    }
                ).catch(error => error)
            },
            //获取角色列表数据
            getRolesDataM(){
                getRolesData().then(res => {
                    if(res.data.meta.status !== 200){
                        this.$message.error('获取角色列表数据失败！')
                    }
                    this.rolesList = res.data.data
                })
            },
            //删除权限
            deletePower(role,rightId){
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                    if (res === 'confirm'){
                        deleteRoleRight(role.id,rightId).then(res => {
                            if(res.data.meta.status === 200){
                                this.$message.success(res.data.meta.msg);
                                role.children = res.data.data
                            }
                        });
                    }
                    }
                ).catch(res => res)
            },
            //监听权限对话框
            addPower(role){
                this.defaultKeys = [];
                this.roleId = role.id;
                this.powerDialog = !this.powerDialog;
                getPowerTree().then(res => {
                    this.roleList = res.data.data;
                });
                this.getDefaultKeys(role,this.defaultKeys);
            },
            //通过递归方式获取该角色下的所有三级权限，放入defaultKeys数组中
            getDefaultKeys(node,arr){
                if( !('children' in node)){
                    return arr.push(node.id)
                }else{
                    node.children.forEach(item => {
                        // console.log(item);
                        this.getDefaultKeys(item,arr)})
                }
            }
        },
        mounted() {
            this.getRolesDataM();
        },
        created() {
            this.$bus.$on('powerDialog',() => { this.powerDialog = !this.powerDialog});
            this.$bus.$on('getRolesList',this.getRolesDataM);
            this.$bus.$on('addRole',this.addRoleM);
            this.$bus.$on('editRole',() => {this.editRoleDialog = !this.editRoleDialog;})
        }
    }
</script>

<style scoped lang="less">
    .el-card{
        margin-top: 1rem;
    }
    .el-table{
        margin-top: 1rem;
    }
    .el-tag{
        margin: 7px;
    }
    .el-row{
        border-top:1px silver dashed;
        display: flex;
        align-items: center;
    }

</style>